import Banner from '../Banner/index';
import Mode from '../Mode/index';
import Action from '../Action/index';
import './home.less';
import { useEffect, useState, useRef } from 'react';
import { Dialog } from 'react-vant';
import { deviceId } from '../../utils/staticData';
import { modeToTempTime } from '../../utils/filters';

export default function Home() {
  /**
   * 直接定义变量和使用useState钩子有以下区别：
   * 1. 直接定义变量： 直接在函数组件中定义变量时，它表现为普通的JavaScript变量。
   * 当变量发生变化时，不会触发组件的重新渲染，除非显式地重新渲染组件。
   * 2. useState钩子： useState是React中的内置钩子，允许函数组件管理状态。
   * 当你使用useState声明状态变量时，React会在状态变量更新时自动触发组件的重新渲染，从而确保组件反映更新后的状态值。
   */
  interface IState {
    mode: number; // 模式
    switch: number; // 开始/取消: 0=关 1=开
    temperature: number; // 烹饪温度
    workTime: number; // 烹饪时间
    fault: number; // 0=无故障 1-5:有故障
    isOnline: boolean; // false=离线 true=在线
  }
  const [btnTitle, setBtnTitle] = useState<String>('开始烹饪');
  const [deviceInfo, setDeviceInfo] = useState<IState>({
    switch: 0,
    mode: 0,
    temperature: 0,
    workTime: 0,
    fault: 0,
    isOnline: true
  });
  // 定时器变量
  const intervalId = useRef<NodeJS.Timeout | null>(null);

  // 根据status，设置按钮文字
  useEffect(() => {
    // This function will be called whenever yourVariable changes
    if (deviceInfo.switch === 1) {
      setBtnTitle('取消烹饪');
    } else {
      setBtnTitle('开始烹饪');
    }
  }, [deviceInfo.switch]); // Specify the dependency array to listen for changes in yourVariable

  useEffect(() => {
    // 这里是副作用的逻辑，类似于 componentDidMount
    intervalId.current = setInterval(() => {
      // 在这里执行你想要的操作
      getDeviceInfo();
      console.log('轮询 3');
    }, 1000);
    return () => {
      // 在组件卸载时清除定时器
      clearInterval(intervalId.current as NodeJS.Timeout);
    };
  }, []); // 依赖数组为空，只在组件挂载和卸载时执行一次
  const Hejia = (window as any).Hejia;
  useEffect(() => {
    Hejia.ready(function () {
      // 页面加载完成后要立即调用Hejia全局对象执行的代码逻辑写这里
      getDeviceInfo();
      console.log('轮询 1');
    });
  }, []);

  // 解析获取到的设备信息数据
  const parseData = (params: any) => {
    params.forEach((e: any) => {
      let value = Number(e.value);

      const keys = ['switch', 'mode', 'temperature', 'workTime', 'fault'];

      if (keys.includes(e.name)) {
        setDeviceInfo(pre => ({
          ...pre, // 使用对象展开符复制原对象的属性
          [e.name]: value // 更新特定属性的值
        }));
      }
    });
  };
  /**
   * 轮询事件
   */
  const getDeviceInfo = () => {
    // deviceId
    Hejia.getDeviceInfo(
      {},
      function (obj: any) {
        console.log(obj, '设备参数---');
        if (obj.device == undefined) {
          return;
        }
        /**
         * 第一级别：离线，设备离线级别最高，如果设备是离线状态，需要展示离线页面
         * 第二级别：故障
         */
        // 设备是否在线, 设置离线状态
        setDeviceInfo(pre => ({
          ...pre, // 使用对象展开符复制原对象的属性
          isOnline: obj.device.connected // 更新特定属性的值
        }));

        parseData(obj.device.parameters);
      },
      function (msg: any, obj: any) {
        console.log(msg, '设备参数报错了---');
        console.log(obj.resultCode + obj.resultCodeMessage);
      }
    );
  };

  const handleActionChange = (val: number, type: string) => {
    if (type === 'time') {
      setDeviceInfo(pre => ({
        ...pre, // 使用对象展开符复制原对象的属性
        workTime: val // 更新特定属性的值
      }));
    } else {
      setDeviceInfo(pre => ({
        ...pre, // 使用对象展开符复制原对象的属性
        temperature: val // 更新特定属性的值
      }));
    }
  };
  const handleModeChange = (val: number) => {
    const modeTempTime = modeToTempTime(val) as { temp: number; time: number };
    console.log(val, 'val handleModeChange');
    console.log(modeTempTime, 'modeTempTime');

    if (val == 9) {
      setDeviceInfo(pre => ({
        ...pre, // 使用对象展开符复制原对象的属性
        mode: val // 更新特定属性的值
      }));
    } else {
      setDeviceInfo(pre => ({
        ...pre, // 使用对象展开符复制原对象的属性
        mode: val, // 更新特定属性的值
        temperature: modeTempTime.temp, // 更新特定属性的值
        workTime: modeTempTime.time // 更新特定属性的值
      }));
    }
  };

  const onRunCooker = () => {
    handleLoopClick(false);
    if (deviceInfo.switch === 1) {
      const msg = '设备运行中，确定要取消烹饪吗？';
      Dialog.confirm({
        message: msg,
        confirmButtonText: '确定',
        confirmButtonColor: 'var(--primary-color)',
        onCancel: () => console.log('cancel'),
        onConfirm: () => {
          setDeviceInfo(pre => ({
            ...pre, // 使用对象展开符复制原对象的属性
            switch: 0 // 更新特定属性的值
          }));
          // 取消烹饪
          Hejia.setControlParam(
            {
              // deviceId,
              parameters: {
                param: [
                  {
                    name: 'switch',
                    content: 0
                  }
                ]
              }
            },
            function () {
              // success, no response
              setTimeout(() => {
                handleLoopClick(true);
              }, 1000);
              console.log('success');
            },
            function (msg: string, obj: any) {
              handleLoopClick(true);
              console.log(msg + obj.resultCode + obj.resultCodeMessage);
            }
          );
        }
      });
    } else {
      // 开始烹饪
      setDeviceInfo(pre => ({
        ...pre, // 使用对象展开符复制原对象的属性
        switch: 1 // 更新特定属性的值
      }));
      Hejia.setControlParam(
        {
          // deviceId,
          parameters: {
            param: [
              {
                name: 'switch',
                content: 1
              }
            ]
          }
        },
        function () {
          // success, no response
          console.log('success');
          setTimeout(() => {
            handleLoopClick(true);
          }, 1000);
        },
        function (msg: string, obj: any) {
          handleLoopClick(true);
          console.log(msg + obj.resultCode + obj.resultCodeMessage);
        }
      );
    }
  };

  const handleLoopClick = (val: boolean) => {
    if (val) {
      // true=>开启 false=>关闭
      if (intervalId.current) {
        clearInterval(intervalId.current);
      }
      intervalId.current = setInterval(() => {
        // 在这里执行你想要的操作
        getDeviceInfo();
        console.log('轮询 2');
      }, 1000);
    } else {
      if (intervalId.current) {
        clearInterval(intervalId.current);
      }
    }
  };

  return (
    <div className="home">
      <div>
        <Banner
          propsBanner={{
            status: deviceInfo.switch,
            fault: deviceInfo.fault,
            isOnline: deviceInfo.isOnline,
            temperature: deviceInfo.temperature,
            workTime: deviceInfo.workTime
          }}
        />

        <Mode
          props={{
            mode: deviceInfo.mode,
            isOnline: deviceInfo.isOnline,
            status: deviceInfo.switch
          }}
          onLoopClick={handleLoopClick}
          onModeChange={handleModeChange}
        />

        <Action
          propsAction={{
            temperature: deviceInfo.temperature,
            workTime: deviceInfo.workTime,
            isOnline: deviceInfo.isOnline,
            status: deviceInfo.switch,
            mode: deviceInfo.mode
          }}
          onActionChange={handleActionChange}
          onLoopClick={handleLoopClick}
        />
        <div className="home-mask-wapper">
          {(!deviceInfo.isOnline ||
            (deviceInfo.switch === 0 && deviceInfo.mode === 0)) && (
            <div className="mask"></div>
          )}
          <div className="footer">
            <div className="stop-btn" onClick={onRunCooker}>
              {btnTitle}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
